<template>
	<view class="login-box flex-column-center2">
		<view class="top-card">
			<view class="flex-align-center mylogo">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="logo-text">Hello ！</view>
			<view class="logo-text2">欢迎登录南阳益享惠</view>
		</view>
		<view class="input-box">

			<view class="input-item">
				<view class="" style="display: flex;align-items: center;">
					<!-- <image src="/static/login/pone.png" mode=""></image> -->
					<input v-model="mobile" placeholder="请输入手机号" placeholder-class="placeholder" type="number"
						maxlength="11" />
				</view>
			</view>
			<view class="input-item">
				<view class="flex-align-center">
					<!-- <image src="/static/login/code.png" mode=""></image> -->
					<input v-model="code" placeholder="请输入验证码" placeholder-class="placeholder" type="number"
						maxlength="6" />
				</view>
				<text>
					<text v-if="codeflag==1" @click="getcode">发送验证码</text>
					<view class="codetime" v-if="codeflag==2">
						<u-count-down :time="60* 1000" format="ss" @finish="finish"></u-count-down><text> 秒后重新获取</text>
					</view>
					<text v-if="codeflag==3" @click="getcode">重新获取</text>
				</text>
			</view>
			<view class="xieyi">
				<view class="flex-align-center" @click="agreeClick">
					<radio :checked="agree" style="transform:scale(0.6)" activeBackgroundColor="#dd0000" />
					<view class="">我已阅读并同意</view>
				</view>
				<text @click="toPage">《用户隐私协议》</text>
			</view>
			<view class="button" @click="login">登录 <u-loading-icon :show="show" color="#fff" size="18"
					style="margin: 0rpx 10rpx;"></u-loading-icon> </view>
		</view>
		<view class="" style="height: 96rpx;margin-top: 100rpx;"></view>
		<!-- <image class="wichat-icon" src="/static/wichat-icon.png" mode=""></image> -->
	</view>
</template>

<script>
	import {
		sendCaptcha,
		login
	} from "@/api/login.js"
	import {
		getUserInfo
	} from "@/api/user.js"
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				codeflag: 1,
				mobile: '',
				code: '',
				agree: false,
				show: false
			};
		},
		methods: {

			// 获取验证码
			getcode() {
				if (this.codeflag == 3) {
					this.codeflag = 2;
				}
				if (uni.$u.test.mobile(this.mobile)) {
					this.codeflag = 2;
					sendCaptcha({
						phoneNumber: this.mobile
					}).then(res => {
						console.log(res.code, '++++++++')
						if (res.code == 200) {
							uni.$u.toast('验证码已发送');
						}
					}).catch(err => {
						this.codeflag = 1;
						console.error('发送验证码失败:', err);
					})
				} else {
					return uni.$u.toast('请输入有效的手机号')
				}
			},
			// 登录
			login() {
				if (uni.$u.test.mobile(this.mobile)) {
					if (uni.$u.test.code(this.code, 4)) {
						if (!this.agree) {
							return uni.$u.toast('请勾选协议！')
						}
						this.show = true;
						login({
							phoneNumber: this.mobile,
							captcha: this.code,
						}).then(res => {
							let data = res.data;
							console.log(data, '++')
							if (res.code == 200) {
								this.show = false;
								store.commit('setUserid', data.userId);
								store.commit('setUsertoken', data.token);

								this.getuserInfo(data.userId);
							} else {
								this.show = false;
								uni.$u.toast(res.msg || '登录失败');
							}
						}).catch(err => {
							this.show = false;
							console.error('登录失败:', err);
							uni.$u.toast('登录失败，请重试');
						})
					} else {
						return uni.$u.toast('请输入有效的验证码')
					}
				} else {
					return uni.$u.toast('请输入有效的手机号')
				}
			},
			agreeClick() {
				this.agree = !this.agree
			},
			toPage() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			},
			//获取用户信息
			getuserInfo(userid) {
				getUserInfo({
					userId: userid
				}).then(res => {
					store.commit('setUserinfo', res.data);
					console.log(res, '+++++++++')
					uni.$u.toast('登录成功');
					uni.switchTab({
						url: '/pages/index/index'
					});
				}).catch(err => {
					console.error('获取用户信息失败:', err);
					uni.$u.toast('获取用户信息失败');
				})
			},
			finish() {
				this.codeflag = 3
			}
		}
	}
</script>

<style lang="scss">
	.login-box {
		width: 100%;
		height: 100vh;
		padding: 0rpx 40rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #ffd9dd 0%, #ffb3bb00 40%);
		background-size: 100% 100%;

		.input-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0rpx 0rpx;
			box-sizing: border-box;
			margin-top: 150rpx;

			.input-item {
				width: 100%;
				// border-bottom: 4rpx solid #e5e5e5;
				padding: 25rpx 20rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;
				// background: #f5f7fa;
				border-bottom: 2rpx solid #cccccc;
				// border-radius: 40rpx;
				box-sizing: border-box;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.codetime {
					display: flex;
					align-items: center;
					color: #dd0000 !important;
					font-size: 28rpx;


					text {
						padding: 0rpx 4rpx;
						color: #dd0000 !important;

					}

				}

				.placeholder {
					font-size: 30rpx;
					color: #999999;
					letter-spacing: 2rpx;
				}

				text {
					color: #dd0000;
					font-size: 30rpx;
					white-space: nowrap !important;
				}

				input {
					padding-left: 10rpx;
				}

			}

			.button {
				width: 100%;
				padding: 20rpx 0rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				font-family: "AlibabaPuHuiTi";
				border-radius: 18rpx;
				background: #dd0000;
				margin-top: 100rpx;
				letter-spacing: 2rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.top-card {
		width: 100%;
		padding-top: 250rpx;
		display: flex;
		align-items: cente;
		flex-direction: column;
		justify-content: center;

		.logo-text {
			color: #333;
			font-size: 28rpx;
			font-size: 48rpx;

			font-weight: bold;

		}

		.logo-text2 {
			font-size: 34rpx;
			color: #333;
		}

		.mylogo {
			width: 210rpx;
			height: 210rpx;
			// background-color: #dd0000;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			// margin: 0 auto;
			// margin-bottom: 20rpx;
			border-radius: 20rpx;
		}
	}

	// ::v-deep(.u-count-down__text) {
	// 	color: #dd0000 !important;
	// }

	.xieyi {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		// justify-content: center;
		color: #696969;
		font-size: 24rpx;

		font-weight: 中等;
		font-family: "苹方";
		position: absolute;
		bottom: 5%;

		text {
			color: #dd0000;
			line-height: 34rpx;
		}
	}

	.wichat-icon {
		width: 96rpx;
		height: 96rpx;
		margin-top: 100rpx;
	}
</style>